<template>
  <div>
                  <div class="size">运单信息</div>
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item label="送货方式">
                    <el-select v-model="form.method" placeholder="请选择送货方式">
                        <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出货时间">
                    <el-date-picker v-model="form.arrive" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
                </el-form-item>
                <el-form-item label="客户订单号">
                    <el-input v-model="form.cOrder"></el-input>
                </el-form-item>
                <el-form-item label="订单来源">
                       <el-select v-model="form.source" placeholder="请输入订单来源">
    <el-option v-for="item in option" :key="item.source" :label="item.label" :value="item.source"> </el-option>
    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.plate"></el-input>
                </el-form-item>
                <el-form-item label="快递单号">
                    <el-input v-model="form.express"></el-input>
                </el-form-item>
                                        <el-form-item label="收货人">
    <el-select v-model="form.cId" placeholder="请输入收货人">
    <el-option v-for="item in optione" :key="item.sId" :label="item.name" :value="item.sId"> </el-option>
    </el-select>
                    </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="medium" v-if="state">新增运单</el-button>
                </el-form-item>
            </el-form>
                    <div style="margin-bottom: 20px;">
            <div class="size">货品清单</div>
            <el-button type="primary" @click="Goodslist()" size="medium">添加商品</el-button>
        </div>
         <!-- 货品清单弹窗 -->
         <div class="box">
        <el-dialog title="商品选择" :visible.sync="dialogTableVisibl">
            <el-form :inline="true" :model="ProductPagination" class="demo-form-inline">
                <el-form-item label="货品名称">
                    <el-input v-model="ProductPagination.name" placeholder="请输入货品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Commodityselection" icon="el-icon-search">搜索</el-button>
                    <el-button @click="Reset" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="griData" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column type="index" label="序号" width="50"> </el-table-column>
                <el-table-column property="name" label="货品名称" width="200"></el-table-column>
                <el-table-column property="sku" label="sku"></el-table-column>
                <el-table-column property="stock" label="库存数量" width="200"></el-table-column>
                <el-table-column property="stock" label="可用库存" width="200"></el-table-column>
                <el-table-column property="description" label="产品描述" width="200"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                style="float:right;"
            background
            v-if="hide"
                    @size-change="handleSizeChae"
                    @current-change="handleCurrentChae"
                    :current-page="ProductPagination.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="ProductPagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
            <div style="display:flex; justify-content:flex-end">
            <el-button type="primary" @click="choice">确认选择</el-button>
            </div>
        </el-dialog>
        </div>
                <!-- 数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="index" label="序号" width="120"> </el-table-column>
            <el-table-column prop="product.number" label="货品编号" width="100"> </el-table-column>
            <el-table-column prop="product.name" label="货品名称"> </el-table-column>
            <el-table-column prop="stock" label="订单数量"> </el-table-column>
            <el-table-column prop="product.unit" label="单位"> </el-table-column>
            <el-table-column prop="product.spec" label="规格"> </el-table-column>
            <el-table-column prop="product.code" label="规格"> </el-table-column>
            <el-table-column prop="product.brand" label="品牌"> </el-table-column>
            <el-table-column prop="product.Batch" label="批次号"> </el-table-column>
            <el-table-column prop="product.validity" label="保质期"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.infoId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
                    <div class="block">
                <el-pagination
                style="float:right;"
            background
            v-if="hid"
                    @size-change="handleSizeCha"
                    @current-change="handleCurrentCha"
                    :current-page="getdate.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="getdate.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tatol"
                >
                </el-pagination>
            </div>
                   <!-- 修改数量 -->
        <el-dialog title="修改数量" :visible.sync="dialogFormVisible">
            <span style="font-weight: 600; ">请输入数量</span>
  <el-form :model="modify" style="margin-top: 10px;">
    <el-form-item >
      <el-input v-model="modify.stock" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="Modifiedquantity">确 定</el-button>
    <el-button @click="dialogFormVisible = false">取 消</el-button>
  </div>
        </el-dialog>
  </div>
</template>

<script>
import { 
Itemaddition ,
Consigneedetails,
Commodityconfirmation,
Commodityconf,
quantity,
Deletedata,
Issuemanag,
Modifyissuess,
Issuedeletion,
OutboundInformation
     } from '@/api/user';
export default {
data() {
    return {
        // 运单信息
        form:{},
         // 送货方式
            options: [
                {
                    method: 0,
                    label: '汽车'
                },
                {
                    method: 1,
                    label: '船运'
                },
                {
                    method: 2,
                    label: '火车'
                },
                {
                    method: 3,
                    label: '自提'
                },
                {
                    method: 4,
                    label: '专车'
                },
                {
                    method: 5,
                    label: '零担'
                },
                {
                    method: 6,
                    label: '快递'
                }
            ],
                        // 订单来源
            option:[{
                source:0,
                label:'淘宝'
            },
            {
                source:1,
                label:'拼多多'
            }],
                        // 收货人
            optione:[],
            // 商品添加
            Productaddition: {
                oId: 0,
                category: 0,
                pId: 0,
                stock: undefined,
                pageNum: 1,
                pageSize: 10
            },
            // 数据传值
            getdate: {
                oId: undefined,
                pageNum: 1,
                pageSize: 10,
                category: 0,
                batch: undefined
            },
            // 货品清单弹窗
            dialogTableVisibl: false,
            // 商品分页
            ProductPagination: {
                pageNum: 1,
                pageSize: 10,
                name: undefined
            },
                        // 商品选择
            multipleTable: [],
            griData: [],
            // 数据
            tableData:[],
                        // 页面渲染总条目数
            tatol:undefined,
                        // 修改数量和日期
            modify:{
                infoId:undefined,
                stock:undefined,
            },
                        // 修改数量弹窗
            dialogFormVisible : false,
            state:true,
            hide:false,
            hid:false
    }
},
methods:{
        // 收货人
        consignee(){
            Consigneedetails().then((ref)=>{
                this.optione  = ref.rows
            })
        },
        // 搜索
        onSubmit(){
OutboundInformation(this.form).then((ref)=>{
    console.log(ref);
    this.Productaddition.oId = ref.oId;
                this.getdate.oId = ref.oId;
                this.state = false
                
})
        },
        // 货品添加弹窗
                Goodslist() {
            if (this.Productaddition.oId) {
                this.dialogTableVisibl = true;
                this.Commodityselection();
            } else {
                this.$message.error('请先新增运单');
            }
        },
                // 商品选择和搜索
        Commodityselection() {
            Itemaddition(this.ProductPagination).then((ref) => {
                this.griData = ref.rows;
                this.total = ref.total;
                this.hide=true 
            });
        },
                // 重置
        Reset() {
            this.ProductPagination.name = undefined;
            this.Commodityselection();
        },
                // 多选
        handleSelectionChange(val) {
            this.multipleTable = val;
            for (let i = 0; i < this.multipleTable.length; i++) {
                this.Productaddition.category = this.multipleTable[i].category;
                this.Productaddition.stock = this.multipleTable[i].stock;
                this.getdate.category = this.multipleTable[i].category;
            }
        },
                // 确认选择
        async choice() {
            for (var i = 0; i < this.multipleTable.length; i++) {
                console.log(this.multipleTable[i].pId);
                this.Productaddition.pId = this.multipleTable[i].pId;
                await Commodityconfirmation(this.Productaddition).then((ref) => {
                    console.log(ref);
                    this.Batchnumber();
                    this.hid = true
                });
            }
            this.dialogTableVisibl = false;
        },
        // 页面渲染分页
                handleSizeCha(val) {
            this.getdate.pageSize = Number(val);
            this.getdate();
        },
        // 页面渲染分页
        handleCurrentCha(val) {
            this.getdate.pageNum = Number(val);
            this.getdate();
        },
        handleSizeChae(val){
            this.ProductPagination.pageSize = Number(val);
            this.Commodityselection();
        },
        handleCurrentChae(val){
            this.ProductPagination.pageNum = Number(val);
            this.Commodityselection();
        },
                Batchnumber() {
            Commodityconf(this.getdate).then((ref) => {
                this.tableData = ref.rows;
                this.tatol = ref.total
            });
        },
                // 修改数量弹窗
        handleClick(val){
            this.title = '修改数量'
            this.modify.infoId  = val.infoId
            this.modify.stock = val.stock
            this.dialogFormVisible = true
        },
               // 修改数量
        Modifiedquantity(){
quantity(this.modify).then((ref)=>{
    console.log(ref);
    this.dialogFormVisible = false
    this.Batchnumber()
})
        },
                del(val){
                     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            Deletedata(val).then((ref)=>{
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
    this.Batchnumber()
})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

        },
            parameter(){
             if(this.$route.query.val){
       this.form = this.$route.query.val
       this.getdate.oId = this.$route.query.val.id
       this.Batchnumber()
            }
            //    console.log(this.$route.query.val);
        }
},
 // 页面监听
      watch: {
    '$route'(){
     this.parameter();
    }},
mounted(){
    this.consignee()
     this.parameter()
      if(this.getdate.oId){
     this.state = false
 }else{
     this.state = true
 }
    },
}
</script>

<style lang="less" scoped>
.size{
    font-weight: 700;
    height: 30px;
}
/deep/.el-form--inline .el-form-item__label {
    font-weight: 700;
}
.box /deep/.el-dialog{
    width: 80% !important;
    padding: 0px 30px;
}
/deep/.el-dialog{
    width: 25% !important;
}
.block{
    height: 60px;
    margin-top: 10px;
}
</style>